<template>
	<view>
		<view class="container" v-if="usershow">
			<view class="blue-box">
				<!-- 蓝色框 -->
				<image class="avatar" :src="avatarUrl" @click="showLoginDialog=true"></image>
				<!-- <button class="avatar-wrapper" @click="getUserInfo">微信授权登录</button> -->
				<view class="nickname">{{nickName}}</view>
			</view>

			<view class="white-box1">
				<!-- 白色框 -->
				<view class="grid-container">
					<view class="grid-item" v-for="(item, index) in gridList" :key="index"
						@click="handleItemClick(item)">
						<view style="text-align: center;font-size: 25px;color: #039FFF;font-weight: bold;">{{item.data}}
						</view>
						<text class="grid-text">{{ item.text }}</text>
					</view>
				</view>
			</view>

			<view class="white-box2">
				<view class="user-operation">
					用户操作
				</view>
				<u-line></u-line>
				<view class="icon-group">
					<view class="icon-item">
						<img src="/static/my/设置.png" alt="设置中心">
						<view class="icon-text">设置中心</view>
					</view>
					<view class="icon-item">
						<img src="/static/my/地址.png" alt="默认地址">
						<view class="icon-text">默认地址</view>
					</view>
					<view class="icon-item" @click="gotoPage">
						<img src="/static/my/反馈.png" alt="建议反馈">
						<view class="icon-text">建议反馈</view>
					</view>
					<view class="icon-item">
						<img src="/static/my/客服.png" alt="官方客服">
						<view class="icon-text">官方客服</view>
					</view>
				</view>
			</view>

			<view class="white-box3">
				<view class="icon-group3">
					<view class="icon-item3" @click="showDialog = true">
						<img src="/static/images/切换身份.png">
						<view class="icon-text3">切换身份</view>
					</view>
					<view class="icon-item3">
						<img src="/static/images/退出.png">
						<view class="icon-text3">退出登录</view>
					</view>
					<view class="icon-item3" style="opacity: 0;">
						<img src="/static/images/退出.png">
						<view class="icon-text3">占位占位</view>
					</view>
					<view class="icon-item3" style="opacity: 0;">
						<img src="/static/images/退出.png">
						<view class="icon-text3">占位占位</view>
					</view>

				</view>
			</view>


			<u-modal @close="showDialog=false" @cancel="showDialog=false" @confirm="switchIdentity" ref="uModal"
				:asyncClose="true" :show="showDialog" :closeOnClickOverlay="true" showCancelButton title="请输入工号和密码">
				<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
					<u-form-item label="工号" prop="model.jobNumber" ref="item1">
						<u--input v-model="model.jobNumber" maxlength='8' placeholder="请输入工号"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="model.password" ref="item1">
						<u--input v-model="model.password" maxlength='20' placeholder="请输入密码"></u--input>
					</u-form-item>
				</u--form>
			</u-modal>

			<u-modal @close="showLoginDialog=false" @cancel="showLoginDialog=false" ref="uLoginModal"
				:show="showLoginDialog" :closeOnClickOverlay="true" :showConfirmButton='false' title="登录/注册">
				<view>
					<u-button type="primary" text="微信一键登录" @click="wxLogin"></u-button>

					<view style="margin-top: 15px;color: #2b2b2b;width: 100%;text-align: center;font-size: 10px;">
						登录即代表您已阅读并同意<span style="color: #039FFF;">《会员须知》</span><span
							style="color: #039FFF;">《隐私协议》</span></view>
				</view>
			</u-modal>


			<u-modal @close="showDialog=false" @cancel="showDialog=false" @confirm="switchIdentity" ref="uModal"
				:asyncClose="true" :show="showDialog" :closeOnClickOverlay="true" showCancelButton title="请输入工号和密码">
				<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm">
					<u-form-item label="工号" prop="model.jobNumber" ref="item1">
						<u--input v-model="model.jobNumber" maxlength='8' placeholder="请输入工号"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="model.password" ref="item1">
						<u--input v-model="model.password" maxlength='20' placeholder="请输入密码"></u--input>
					</u-form-item>
				</u--form>
			</u-modal>

			<u-modal @close="showSettingDialog=false" @confirm="submitSetting" asyncClose="true" @cancel="showSettingDialog=false" ref="uSettingModal"
				:show="showSettingDialog" :show-cancel-button="true" :showConfirmButton='true' title="头像昵称设置">
				<view style="display: flex;flex-direction: column;align-items: center;justify-content: space-between;">
					<view>
						<u-avatar :src="temp.avatarUrl" size="50"></u-avatar>
					</view>
					<view style="margin-top: 10px;width: 200px;">
						<button style="background-color: #3C9CFF;font-size: 15px;" type="primary"
							open-type="chooseAvatar" @chooseavatar="onChooseAvatar">设置头像</button>
					</view>
					<view style="text-align: center;margin-top: 10px;width: 200px;">
						<input maxlength="8" @input="nickNameInput" @blur="nickNameInput" type="nickname"
							class="weui-input" placeholder="请输入昵称" />
					</view>
				</view>
			</u-modal>

			<view class="dialog-mask" v-if="false">
				<view class="dialog">
					<view class="dialog-title">请输入工号和密码</view>
					<form class="dialog-form">
						<view class="form-item">
							<label class="form-label">工号：</label>
							<input class="form-input" type="text" v-model="jobNumber">
						</view>
						<view class="form-item">
							<label class="form-label">密码：</label>
							<input class="form-input" type="password" v-model="password">
						</view>
					</form>
					<view class="dialog-buttons">
						<button class="dialog-button" @click="showDialog = false">取消</button>
						<button class="dialog-button primary" @click="switchIdentity">确定</button>
					</view>

				</view>
			</view>
		</view>

		<view class="container" v-if="workshow">
			<view class="blue-box">
				<!-- 蓝色框 -->
				<image class="avatar" :src="avatarUrl" @click="getUserInfo"></image>
				<!-- <button class="avatar-wrapper" @click="getUserInfo">微信授权登录</button> -->

			</view>

			<view class="white-box1">
				<!-- 白色框 -->
				<view class="grid-container">
					<view class="grid-item" v-for="(item, index) in gridList2" :key="index"
						@click="handleItemClick2(item)">
						<view class="">{{item.icon}}</view>
						<text class="grid-text">{{ item.text }}</text>
					</view>
				</view>
			</view>

			<view class="white-box2">
				<view class="user-operation">
					用户操作

				</view>
				<view class="underline"></view>
				<view class="icon-group">
					<view class="icon-item">
						<img src="/static/setting.png" alt="设置中心">
						<view class="icon-text">设置中心</view>
					</view>
				</view>
			</view>

			<view class="white-box3">

				<view class="icon-group3">
					<view class="icon-item3">
						<img src="/static/setting.png" alt="设置中心">
						<view class="icon-text3">切换身份</view>
					</view>
					<view class="icon-item3">
						<img src="/static/default-address.png" alt="默认地址">
						<view class="icon-text3">退出登录</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		login
	} from '../../api/api.js'
	export default {
		data() {
			return {
				model: {
					jobNumber: '', // 工号
					password: ''
				},
				showSettingDialog: false,
				showLoginDialog: false,
				showDialog: false, // 控制对话框显示与隐藏
				password: '', // 密码
				workshow: false,
				usershow: true,
				temp:{
					avatarUrl:'',
					nickName:''
				},

				avatarUrl: '',
				nickName: '',
				gridList: [ // 圆形图标数据源
					{
						icon: '/static/images/icon1.png',
						data: 0,
						text: '报修'
					},
					{
						icon: '/static/images/icon2.png',
						data: 0,
						text: '预约'
					},
					{
						icon: '/static/images/icon3.png',
						data: 0,
						text: '总订单'
					},
				],
				gridList2: [ // 圆形图标数据源
					{
						icon: '0',
						text: '待处理'
					},
					{
						icon: '0',
						text: '处理中'
					},
					{
						icon: '0',
						text: '已完成'
					},
				],
				rules: {
					'model.jobNumber': {
						type: 'string',
						max: 8,
						required: true,
						message: '请填写正确的工号',
						trigger: ['blur', 'change']
					},
					'model.password': {
						type: 'string',
						max: 20,
						required: true,
						message: '请填写正确的密码',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		methods: {
			async switchIdentity() {
				this.$refs.uForm.validate().then(res => {








					this.showDialog = false;
					uni.showToast({
						'title': '提交成功',
						'icon': 'success'
					})

				}).catch(errors => {
					this.showDialog = false;
					uni.showToast({
						'title': '提交失败',
						'icon': 'error'
					})
				})
				// 获取工号和密码
				// const [jobNumber, password] = [this.model.jobNumber, this.model.password];

				// // 调用后台接口进行查询
				// uni.request({
				// 	url: 'http://braincognitiontec.top:30003/employee/login',
				// 	method: 'POST',
				// 	data: {
				// 		"employeeId": jobNumber,
				// 		"pwd": password
				// 	},
				// 	success: (res) => {
				// 		console.log(res.data)
				// 		if (res.data.success) {
				// 			// 如果查询成功，则跳转到对应页面
				// 			this.workshow = true
				// 			this.usershow = false
				// 			this.$store.commit('setworkshow', this.workshow)
				// 			this.$store.commit('setusershow', this.usershow)

				// 			// 将工号和密码保存到Vuex中
				// 			this.$store.commit('setJobNumber', this.jobNumber)
				// 			this.$store.commit('setPassword', this.password)

				// 		} else {
				// 			// 如果查询失败，则提示用户输入有误
				// 			uni.showToast({
				// 				title: '输入有误，请重新输入',
				// 				icon: 'none',
				// 			});
				// 		}
				// 	}
				// });

				// 根据查询结果进行判断，并执行相应操作

			},

			handleItemClick(item) {
				switch (item.text) {
					case '报修':
						uni.navigateTo({
							url: '/pages/submit-form/submit-form'
						});
						break;
					case '预约':
						uni.navigateTo({
							url: ''
						});
						break;
					case '总订单':
						uni.navigateTo({
							url: ''
						});
						break;
				}
			},
			handleItemClick2(item) {
				switch (item.text) {
					case '待处理':
						uni.navigateTo({
							url: ''
						});
						break;
					case '处理中':
						uni.navigateTo({
							url: ''
						});
						break;
					case '已完成':
						uni.navigateTo({
							url: ''
						});
						break;
				}
			},
			
			wxLogin() {
				uni.login({
					success: res => {
						const code = res.code
						console.log("code", code)
						this.showLoginDialog = false
						this.showSettingDialog = true
						// login({
						// 	'code': code
						// }).then(res => {
						// 	console.log("登录成功", res)

						// 	uni.setStorageSync('token', res.data.token)





						// })
					},
					fail: err => {
						uni.showToast({
							title: '登录失败，请稍后再试',
							icon: 'none'
						})
					}
				})



			},
			
			nickNameInput(e) {
			   this.temp.nickName=e.detail.value
			},
			
			onChooseAvatar(e) {
				console.log(e)
				this.temp.avatarUrl = e.detail.avatarUrl
			},
			submitSetting(e){
				if(this.temp.avatarUrl!=''){
					this.avatarUrl=this.temp.avatarUrl
					this.showSettingDialog = false
					this.temp.avatarUrl=''
				}else if(this.temp.nickName !=''){
					this.nickName=this.temp.nickName
					this.showSettingDialog = false
					this.temp.nickName=''
				}else{
					this.temp.nickName=''
					this.temp.avatarUrl=''
					this.showSettingDialog = false
				}
				
			},

			gotologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},

			gotoPage() {
				// 这里可以使用 uni.navigateTo 或者 uni.redirectTo 等页面跳转 API
				uni.navigateTo({
					url: '/pages/suggest/suggest'
				})
			},

		},

		onLoad() {
			// // 获取本地存储的token信息
			// const token = uni.getStorageSync('token');
			// // 如果token不存在，则跳转到登录页面
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login'
			// 	});
			// }
		},
		// ...

	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: 100vh;
		/* 设置容器高度为100%视窗高度 */
		overflow: auto;
		/* 设置滚动条 */
	}

	.blue-box {
		position: relative;
		/* 添加 */
		width: 100%;
		height: 200px;
		background-image: linear-gradient(to bottom, #009EFF, #0065F3);
		border-radius: 10rpx 10rpx 40rpx 40rpx;
	}

	.white-box1 {
		/* 添加 */
		/* position: absolute; */
		position: relative;
		top: -40px;
		z-index: 1;
		width: 90%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		object-fit: cover;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%);
		box-shadow: 0 15rpx 25rpx rgba(0, 0, 0, 0.1);
	}

	.nickname {
		position: absolute;
		width: 100%;
		top: 60%;
		color: #fff;
		text-align: center;
	}

	.grid-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		padding: 10px 0;
	}

	.grid-item {
		display: flex;
		width: 100px;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}


	.grid-text {
		margin-top: 5rpx;
		font-size: 26rpx;
	}

	.white-box2 {
		margin-top: -25px;
		width: 90%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;

	}

	.user-operation {
		font-size: 30rpx;
		font-weight: bold;
		color: #0065F3;
		margin-top: 10px;
		margin-bottom: 5px;
		padding-left: 15px;
	}

	.icon-group {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 13px 0;
	}

	.icon-item img {
		width: 60rpx;
		height: 60rpx;
	}

	.icon-text {
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	.white-box3 {
		margin-top: 10px;
		width: 90%;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
	}

	.icon-group3 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}

	.icon-item3 {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		margin: 13px 0;
	}

	.icon-item3 img {
		width: 60rpx;
		height: 60rpx;

	}

	.icon-text3 {
		font-size: 24rpx;
		margin-top: 15rpx;
	}


	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.dialog {
		width: 80%;
		background-color: #fff;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
</style>